<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" :disabled="disabled" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="教材名称" prop="book_name">
            <!-- <el-input v-model="form.name" style="width: 200px"></el-input> -->
            <el-autocomplete v-model="form.book_name" :fetch-suggestions="querySearchAsync" placeholder="请输入教材名称"
              @select="handleSelect"></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开课学期" prop="semester">
            <el-select v-model="form.semester" placeholder="请选择开课学期" style="width: 200px">
              <el-option v-for="option in semesterOptions" :key="option.value" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="课程编号">
            <el-input v-model="form.course_code" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程名称">
            <el-input v-model="form.course_name" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12"> <el-form-item label="ISBN编号">
            <el-input v-model="form.isbn_code" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开课学院" prop="academyUsedName">
            <el-select v-model="form.academyUsedName" placeholder="请选择开课学院" style="width: 200px">
              <el-option v-for="option in schoolList" :key="option.value" :label="option.deptName"
                :value="option.deptName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="专业代码" prop="specialityCode">
            <el-input v-model="form.specialityCode" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业名称" prop="specialityName">
            <el-input v-model="form.specialityName" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="教材类别">
        <el-radio-group v-model="form.book_tpye">
          <el-radio label="中文教材">中文教材</el-radio>
          <el-radio label="国家级规划教材">国家级规划教材</el-radio>
          <el-radio label="校级规划教材">校级规划教材</el-radio>
          <el-radio label="其他教材">其他教材</el-radio>
          <el-radio label="校级讲义">校级讲义</el-radio>
          <el-radio label="校级重点规划教材">校级重点规划教材</el-radio>
          <el-radio label="马工程教材">马工程教材</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="教材性质">
        <el-radio-group v-model="form.book_property">
          <el-radio label="专业选修">专业选修</el-radio>
          <el-radio label="中文教材">中文教材</el-radio>
          <el-radio label="中文翻译">中文翻译</el-radio>
          <el-radio label="外文原著">外文原著</el-radio>
          <el-radio label="日文教材">日文教材</el-radio>
          <el-radio label="英文教材">英文教材</el-radio>
          <el-radio label="其他教材">其他教材</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="教材选用依据" prop="applyReason">
        <el-input type="textarea" autosize placeholder="请输入内容" v-model="form.applyReason" style="width: 400px"></el-input>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import { getBookListByName, addBookApply } from "@/api/bkmanage/application";
import { listDept } from "@/api/system/dept";
export default {
  props: {
    formData: {},
    disabled: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      schoolList: [], // 学校列表
      form: {
        id: "", // 教材id
        book_name: "", // 教材名称
        course_code: "", // 课程编号
        course_name: "", // 课程名称
        isbn_code: "", // isbn
        book_property: "", // 教材性质
        book_tpye: "", // 教材类型
        academyUsedName: "", // 学院
        semester: "", //学期
        specialityCode: "", // 专业代码
        specialityName: "", // 专业名称
        applyReason: "",  // 申请理由
      },
      semesterOptions: [
        { label: "2024年春季", value: "2024年春季" },
        { label: "2024年秋季", value: "2024年秋季" },
        { label: "2025年春季", value: "2025年春季" },
        { label: "2025年秋季", value: "2025年秋季" },
        { label: "2026年春季", value: "2026年春季" },
        { label: "2026年秋季", value: "2026年秋季" },
      ],
      rules: {
        book_name: [
          { required: true, message: "请输入教材名称", trigger: "blur" },

        ],
        academyUsedName: [
          { required: true, message: "请选择开课学院", trigger: "change" },
        ],
        semester: [
          { required: true, message: "请选择开课学期", trigger: "change" },
        ],
        specialityCode: [
          { required: true, message: "请输入专业代码", trigger: "blur" },

        ],
        specialityName: [
          { required: true, message: "请输入专业名称", trigger: "blur" },

        ],
        applyReason: [
          { required: true, message: "请输入教材选用依据", trigger: "blur" },
        ]
      },
    };
  },
  created() {
    if (this.formData) this.form = this.formData;
    this.getSchoolList()
  },
  methods: {
    // 学院列表
    getSchoolList() {
      listDept().then((res) => {
        this.schoolList = res.data
      })
    },
    handleSelect(e) {
      Object.assign(this.form, e);
      this.form.bookId = e.id;
    },
    // 远程搜索
    querySearchAsync(queryString, cb) {
      if (!queryString) return

      getBookListByName({ bookName: queryString }).then((res) => {
        res?.rows.forEach((item) => {
          item.value = item.book_name
        })
        var restaurants = res?.rows;
        var results = restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1500 * Math.random());
      })

    },
    // createStateFilter(queryString) {
    //   return (state) => {
    //     return (state.book_name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    //   };
    // },
    // 提交申请
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addBookApply(this.form).then(() => {
            this.$message.success('提交成功')
            setTimeout(() => {
              this.clearAddForm()
              // 重新请求一下列表
              this.$emit('successApplyEvent');
            }, 800)

          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 清空申请表单
    clearAddForm() {
      this.$refs.form.resetFields();
      this.form = {
        bookId: "", // 教材id
        bookName: "", // 教材名称
        course_code: "", // 课程编号
        course_name: "", // 课程名称
        isbn_code: "", // isbn
        book_property: "", // 教材性质
        book_tpye: "", // 教材类型
        academyUsedName: "", // 学院
        semester: "", //学期
        specialityCode: "", // 专业代码
        specialityName: "", // 专业名称
        applyReason: "",  // 申请理由
      }
      // 关闭新建申请弹框
      this.$emit('applyEvent', false);
    },

  },
};
</script>
